<template>
  <div class="app-content">
    <div id="container"></div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ProgressNode from '@/views/x6node/ctmRect.vue'
import testNode from '@/components/testNode.vue'
import { Graph, Timing } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'

register({
  shape: 'custom-vue-x6node',
  width: 100,
  height: 100,
  component: ProgressNode,
})

register({
  shape: 'custom-vue-test-x6node',
  width: 40,
  height: 100,
  component: testNode,
})

Graph.registerEdge('test-edge', {
  inherit: 'edge',
  markup: [
    {
      tagName: 'path',
      selector: 'line',
      attrs: {
        fill: 'none',
      },
    },
    {
      tagName: 'circle',
      selector: 'circle',
      attrs: {
        // r: 5,
        // fill: '#00FFFF',
        // atConnectionRatio: 0,
        // refCy: -10
      },
    },
  ],
  attrs: {
    line: {
      connection: true,
      sourceMarker: null, // 实心箭头
      targetMarker: null,
      stroke: 'rgba(213,48,48, 0.3)',
      strokeLinejoin: 'round',
      strokeWidth: 2,
    },
    circle: {
      r: 5,
      fill: '#00FFFF',
      atConnectionRatio: 0,
      refCy: -10,
    },
  },
})

export default defineComponent({
  name: 'App',
  mounted() {
    const graph = new Graph({
      container: document.getElementById('container'),
      background: {
        color: '#F2F7FA',
      },
      autoResize: true,
    })
    const node1 = graph.addNode({
      shape: 'custom-vue-test-x6node',
      position: { x: 100, y: 100 },
      size: { width: 100, height: 100 },
      data: {
        progress: 12,
      },
      // x: 400,
      // y: 200,
    })

    const node2 = graph.addNode({
      shape: 'custom-vue-test-x6node',
      position: { x: 300, y: 300 },
      size: { width: 100, height: 100 },
      data: {
        progress: 12,
      },
      // x: 400,
      // y: 200,
    })

    const edge = graph.addEdge({
      shape: 'test-edge',
      id: '1001',
      source: node2,
      target: node1,
      vertices: [
        { x: 350, y: 250 },
        { x: 150, y: 250 },
      ],
      connector: {
        name: 'rounded',
        args: {},
      },
    })
    let edge1 = graph.getCellById('1001')

    let options1 = {
      delay: 0,
      duration: 3000,
      timing: Timing.linear,
      complete: (p) => {
        console.log('🚀 ~ mounted ~ p:', p)
        edge1.updateAttrs(
          {
            circle: { atConnectionRatio: 0 },
          },
          { silent: true }
        )
        edge.transition(p.path, 1, options1)
      },
    }
    edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
  },
})
</script>
<style lang="scss" scoped>
.app-content {
  height: 500px;
}
@keyframes move {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}
</style>
